<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<div class="big-box">
					<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
					<div class="title-box">
						<span class="title-line"></span>
						<div class="title">
							<span class="jiu-font30-fff">藏馆名称</span>
							<span class="jiu-font32-555">MY COLLECTION</span>
						</div>
					</div>
				</div>
				<div class="input-box">
					<div class="input-item" style="padding: 6.4vw;width: 100%;"> 
						<span class="jiu-font28-aaa" style="flex-shrink: 0;">藏馆名称</span>
						<input type="text" placeholder="不超过10个字" v-model="name" placeholder-class="jiu-font28-555" style="color: #FFCE80;font-weight: 300;width: 100%;" maxlength="10" />
					</div>
					
					<div class="input-text" style="padding: 6.4vw;width: 100%;height: 42.67vw;">
						<span class="jiu-font28-aaa" style="flex-shrink: 0;margin-right: 4.27vw;">藏馆介绍</span>
						<textarea v-model="desc" cols="30" rows="10" placeholder="简单介绍一下你的藏馆吧！（不超过60个字）" style="color: #FFCE80;font-weight: 300;width: 100%;" placeholder-class="jiu-font28-555" maxlength="60"></textarea>
					</div>
				</div>
			</ma-refresh>
			<div slot="footer">
				<div class="btn-box">
					<span class="btn" v-if="museumType == 'edit'" @tap="onEdit">确认修改</span>
					<span class="btn" @tap="onCollectionCreate" v-else>创建</span>
				</div>
			</div>
		</ma-body> 
		<museumCard ref="museum" :num="num"></museumCard>
	</div>
</template>

<script>
	import museumCard from '@/subPackB/components/museum-card/museum-card';
	export default{
		components: {
			museumCard
		},
		data(){
			return{
				desc: '',
				name: '',
				num: 0,
				museumType: '',
				id: 0
			}
		},
		methods: {
			onEdit(){
				let data = {
					desc: this.desc,
					name: this.name,
					id: this.id
				}
				this.$u.api.onCollectionInfoUpdate(data).then(res=>{
					uni.showToast({
						icon: 'none',
						title: '编辑成功'
					})
					uni.navigateBack({
						delta: 1
					})
				})
			},
			onCollectionCreate(){
				if(this.desc.length == 0 || this.name.length == 0){
					uni.showToast({
						icon: 'none',
						title: '请将藏馆信息填写完整！'
					})
					return;
				}
				let data = {
					desc: this.desc,
					name: this.name
				};
				this.$u.api.onCollectionCreate(data).then(res=>{
					this.$refs.museum.open();
					this.num = res.data;
				})
			}
		},
		onLoad(e){
			this.museumType = e.eType;
			if(e.id) this.id = e.id;
		}
	}
</script>

<style lang="scss">
	textarea{
		font-size: 3.73vw;
		font-weight: 300;
		height: 100%;
		.jiu-font28-555{
			font-weight: 300;
			height: 100%;
		}
	}
	input{
		font-size: 3.73vw;
		font-weight: 300;
		height: 100%;
		.jiu-font28-555{
			font-weight: 300;
			height: 100%;
		}
	}
	.input-box{
		margin-top: 12.8vw;
		padding-left: 5.33vw;
		.input-item{
			display: flex;
			align-items: center;
			padding: 4.8vw 5.33vw;
			padding-left: 6.8vw;
			background-color: #1B1B1B;
			border-radius: 12.8vw 0 0 12.8vw;
			font-size: $jiu-font28;
			font-weight: 500;
			color: #aaaaaa;
			.jiu-font28-aaa{
				width: 16vw;
				margin-right: 4.27vw;
			}
		}
	}
	.input-text{
		margin-top: 2.67vw;
		display: flex;
		align-items: flex-start;
		padding-left: 6.8vw;
		border-radius: 6.4vw 0 0 6.4vw;
		font-size: $jiu-font28;
		font-weight: 500;
		background-color: #1B1B1B;
		color: #aaaaaa;
		padding: 6.4vw 0 0 4.27vw;
	}
	.big-box{
		padding-top: 17.07vw;
		display: flex;
		flex-direction: column;
		.title-box{
			display: flex;
			padding-left: 5.33vw;
			.title-line{
				display: block;
				width: 1.07vw;
				height: 17.07vw;
				border-radius: 12.08vw;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 3.2vw;
			}
			.input-text{
				display: flex;
				flex-direction: column;
			}
			.title{
				display: flex;
				flex-direction: column;
			}
		}
	}
	.btn-box{
		padding: 2.13vw 5.33vw;
		background-color: #1D1D1A;
		.btn{
			display: block;
			width: 100%;
			line-height: 12.8vw;
			border-radius: 6.4vw;
			background: #A972FF;
			box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.48);
			text-align: center;
			font-size: 3.73vw;
			font-weight: 500;
			color: #000;
		}
	}
</style>